<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米定时器</title>
    <style>
        .box {
            width: 512px;
            height: 400px;
            overflow: hidden;
            margin:100px auto;
            position: relative;
        }

        .box span {
            position: absolute;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }

        .box img {
            position: relative;
            top: 0;
            left:0;
        }

        .box .up{
            top:0;
        }

        .box .down{
            bottom:0;
        }
    </style>
    <script>
        window.onload = function () {
            var picUp = document.getElementById("picUp");
            var picDown = document.getElementById("picDown");
            var img = document.getElementById("img");

            var top = 0;
            var timer = null;

            picUp.onmouseover = function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    top -= 3;
                    top >= -1070 ? img.style.top = top + "px" : clearInterval(timer);
                },30);
            }

            picDown.onmouseover = function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    top++;
                    top <= 0 ? img.style.top = top + "px" : clearInterval(timer);
                },30);
            }

            picUp.parentNode.onmouseout = function () {
                clearInterval(timer);
            }

        }
    </script>
</head>
<body>
    <div class="box">
        <img src="mi.png" alt="" id="img">
        <span class="up" id="picUp"></span>
        <span class="down" id="picDown"></span>
    </div>
</body>
</html>